<template>
	<div class="floor">
		<div class="floor-title">{{ floorTitle }}</div>
		<div class="ordered-floor">
			<div class="first-floor"><img :src="floorData0"
						 width="100%"></div>
			<div>
				<div class="second-floor"><img :src="floorData1"
							 width="100%"></div>
				<div><img :src="floorData2"
							 width="100%"></div>
			</div>
		</div>
		<div class="disordered-floor">
			<div v-for="(item ,index) in floor2"
					 :key="index">
				<img :src="item.image"
						 width="100%" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Floor',
	props: ['floorData', 'floorTitle'],
	data() {
		return {
			floorData0: '',
			floorData1: '',
			floorData2: '',
			floor2: []
		}
	},
	watch: {
		floorData: function () {
			this.floorData0 = this.floorData[0].image
			this.floorData1 = this.floorData[1].image
			this.floorData2 = this.floorData[2].image
			this.floor2 = this.floorData.slice(3)
		}
	}
}
</script>

<style lang="scss" scoped>
.floor-title {
	text-align: center;
	font-size: 14px;
	height: 1.8rem;
	line-height: 1.8rem;
}

.ordered-floor {
	display: flex;
	flex-direction: row;
	background-color: #fff;
	border-bottom: 1px solid #ddd;

	div {
		width: 10rem;

		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	.first-floor {
		border-right: 1px solid #ddd;
	}

	.second-floor {
		border-bottom: 1px solid #ddd;
	}
}

.disordered-floor {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: #fff;

	div {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 10rem;
		border-bottom: 1px solid #ddd;

		&:nth-child(odd) {
			border-right: 1px solid #ddd;
		}
	}
}
</style>
